<!-- 编辑项目人员 -->
<template>
  <el-dialog v-model="dialog" title="编辑项目人员" width="700" destroy-on-close>
    <el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
      <el-form-item label="项目名称：">
        {{ formData.cname }}
      </el-form-item>
      <el-form-item label="前期进度：">
        <el-slider v-model="formData.preproductionProgress" show-input />
      </el-form-item>
      <el-form-item label="中期进度：">
        <el-slider v-model="formData.productionProgress" show-input />
      </el-form-item>
      <el-form-item label="后期进度：">
        <el-slider v-model="formData.postProductionProgress" show-input />
      </el-form-item>
      <el-form-item label="前期占比：">
        <el-input-number v-model="formData.preproductionProportion" />
      </el-form-item>
      <el-form-item label="中期占比：">
        <el-input-number v-model="formData.productionProportion" />
      </el-form-item>
      <el-form-item label="后期占比：">
        <el-input-number v-model="formData.postProductionProportion" />
      </el-form-item>
      <el-form-item label="负责人：">
        <el-input v-model="formData.producer" style="width: 100%" autosize type="textarea" placeholder="请输入项目负责人" />
      </el-form-item>
      <el-form-item label="开始时间：">
        <el-date-picker v-model="formData.startTime" type="date" placeholder="请选择项目开始时间" />
      </el-form-item>
      <el-form-item label="结束时间：">
        <el-date-picker v-model="formData.endTime" type="date" placeholder="请选择项目结束时间" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import Api from '../../api'
import { ElMessage } from 'element-plus'
import { useProjectssStore } from '../../stores'

const emits = defineEmits(['submited'])
const dialog = ref(false)
const formRef = ref(null)
const formData = reactive<any>({
  id: 0,
  cname: null,
  preproductionProgress: 0, // 前期进度
  productionProgress: 0, // 中期进度
  postProductionProgress: 0, // 后期进度
  preproductionProportion: 0, // 前期占比
  productionProportion: 0, // 中期占比
  postProductionProportion: 0, // 后期占比
  producer: null, // 项目负责人
  startTime: null, // 项目开始时间
  endTime: null, // 项目结束时间
})
const rules = reactive({
  reproductionProportion: [
    { required: true, message: '请输入前期占比', trigger: 'blur' },
    { type: 'number', min: 0, message: '前期占比必须大于等于0', trigger: 'blur' },
  ],
  productionProportion: [
    { required: true, message: '请输入中期占比', trigger: 'blur' },
    { type: 'number', min: 0, message: '中期占比必须大于等于0', trigger: 'blur' },
  ],
  postProductionProportion: [
    { required: true, message: '请输入后期占比', trigger: 'blur' },
    { type: 'number', min: 0, message: '后期占比必须大于等于0', trigger: 'blur' },
  ],
})
// 自定义验证函数，检查三个比例总和不能超过100
const validateProportions = () => {
  const total = formData.preproductionProportion + formData.productionProportion + formData.postProductionProportion
  if (total > 100) {
    ElMessage.error('三个阶段占比总和不能超过100%')
    return false
  }
  return true
}
const handleSubmit = async () => {
  // 先进行表单验证
  if (!validateProportions()) {
    return
  }
  const res = await Api.Projects.updateProjectParticipant(formData)
  if (res.code === 200) {
    ElMessage.success('编辑成功！')
    refreshCatch()
    dialog.value = false
    emits('submited')
  } else {
    ElMessage.error('编辑失败！')
  }
}

const refreshCatch = async () => {
  const res = await Api.Projects.getProjectListAll()
  const { code, rows } = res
  if (code === 200) {
    useProjectssStore().setAllState(rows)
  }
}

const openDialog = (val: any) => {
  Object.assign(formData, val)
  dialog.value = true
}

defineExpose({
  openDialog,
})
</script>
<style lang="scss" scoped>
.drawer-footer {
  text-align: right;
}
</style>
